<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../favicon.ico">

    <title>欢度五一兑奖表单填写</title>

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
    <link rel="stylesheet" href="../../../../assets/css/demos.css">

    <style type="text/css">
        .top-banner {
            /*		    width: 100%;
		    padding-bottom: 50%;
		    background-repeat: no-repeat;
		    background-position: center;*/
            background-image: url(../../../../assets/image/cards/card-prize-may2017-inside.jpg);
            /*		    background-size: cover;
		    border: 1px solid #EFEFF4;*/
        }
        
        ._LEFT_ {
            float: left;
        }
        
        ._RIGHT_ {
            float: right;
        }
        
        ._PICKER_HEIGHT_ {
            height: 40%;
        }
    </style>

</head>

<body>

    <div class="page-group">
        <div class="page page-current">
            <div class="content native scroll pull-up">
                <div class="top-banner hideWhenSubmit"></div>

                <!-- 表单_个人信息部分 -->
                <div class="list-block" style="margin-top: 0rem;">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">姓名*</div>
                                    <div class="item-input">
                                        <input id="customer_name" class="required" type="text" placeholder="请填写您的姓名">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-smartphone"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">手机号码*</div>
                                    <div class="item-input">
                                        <input id="mobile_number" class="required" type="tel" placeholder="请输入11位有效的手机号">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- END-表单_个人信息部分 -->

                <!-- 表单_产品信息部分 -->
                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">购买日期*</div>
                                    <div class="item-input">
                                        <input id="purchasing_date" class="required" type="text" placeholder="请填写购买日期" readonly />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-model"></i></div>
                                <div class="item-inner">
                                    <div class="item-title input-label label">产品类型*</div>
                                    <div class="item-input">
                                        <input id="product_category" class="required" type="text" placeholder="请选择产品类型" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-model"></i></div>
                                <div class="item-inner">
                                    <div class="item-title input-label label">产品型号*</div>
                                    <div class="item-input">
                                        <input id="product_model" class="required" type="email" style="text-transform:uppercase;" placeholder="请输入购买产品型号" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content hideWhenSubmit">
                                <div class="item-media"><i class="icon icon-form-store"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">门店编号</div>
                                    <div class="item-input">
                                        <input id="store_name" type="text" placeholder="如了解门店编号，可在此输入号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--  END-表单_产品信息部分 -->

                <!-- 表单_发票部分 -->
                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-invoice-amount"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">发票金额*</div>
                                    <div class="item-input">
                                        <input id="invoice_price" class="required" type="number" placeholder="请输入发票上的发票金额（单位：元）">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-invoice-number"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">发票号码*</div>
                                    <div class="item-input">
                                        <input id="invoice_number" class="required" type="text" placeholder="请输入发票上的发票号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content hideWhenSubmit">
                                <div class="item-media"><i class="icon icon-form-invoice-file"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">上传发票*</div>
                                    <div class="item-input">
                                        <input id="invoice_bytes" class="file_upload" type="file">
                                        <input class="file_upload_cover required" type="text" placeholder="请点击上传发票照片" readonly>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content hideWhenSubmit">
                                <div class="item-media"><i class="icon icon-form-invoice-remark"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">备注</div>
                                    <div class="item-input">
                                        <input id="invoice_remark" type="text" placeholder="如有补充信息,您可以填写这里"></input>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- END-表单_发票部分 -->

                <!-- 表单_地址部分 -->
                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <!-- 省市区 -->
                                <div class="item-media"><i class="icon icon-form-address-major"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">收件地址*</div>
                                    <div class="item-input">
                                        <input id="address_major_part" class="required" type="text" placeholder="请填写收件地址">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <!-- 详细地址 -->
                                <div class="item-media"><i class="icon icon-form-address-minor"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">街道地址*</div>
                                    <div class="item-input">
                                        <input id="address_minor_part" class="required" type="text" placeholder="请填写街道、门牌号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- END-表单_地址部分 -->


                <!-- 表单底部 -->
                <div class="content-block hideWhenSubmit" style="margin-bottom:0.2rem;">
                    <div class="row">
                        <div class="col-60">
                            <input type="checkbox" checked="checked" class="checkbox_style">
                            <span style="padding-left: 12px;">
							<a href="#" class="open-about">已阅读条款及细则</a>
						</span>
                        </div>
                        <div class="col-40" style="color:red;text-align: right"><span>备注：*为必填项</span></div>
                    </div>
                    <p></p>
                    <div class="row" style="margin-top: 1.5rem;margin-bottom: 1.5rem;">
                        <div class="col-50"><a href="#" class="button button-big button-fill button-danger" id="cancel-button">取消</a></div>
                        <div class="col-50"><a href="#" class="button button-big button-fill button-success create-actions" id="submit-button">提交</a></div>
                    </div>

                    <p style="font-size: 12px;">
                        </span>如遇到任何问题或疑问，请保留此截图并提交给松下生活沙龙官方微信</p>
                </div>
                <!-- END-表单底部 -->
            </div>
        </div>

        <div class="modal-overlay" style="background: rgba(0,0,0,.8)"></div>

        <div class="popup popup-about">
            <div class="content-block">
                <div id="close-button"><a href="#" class="close-popup">关闭</a></div>
                <h3 style="text-align:center">活动参与方式与规则</h3>
                <h4>参与方式：</h4>
                <p>进入活动页面，填写相关信息，上传发票凭证照片。即可参加活动。</p>

                <h4>活动时间：</h4>
                <p>2017年4月22日-2017年5月1日</p>

                <h4>上传信息时间：</h4>
                <p>2017年4月22日-2017年5月10日（5月10日以后上传信息通道将关闭）</p>

                <h4>一.满额买赠活动</h4>
                <h5>礼品说明：</h5>
                <table style="width: 100%; text-align: center;">
                    <tr>
                        <th style="width: 30%;">单张发票金额</th>
                        <th>礼品</th>
                    </tr>
                    <tr>
                        <td>1000-1999元</td>
                        <td>松下电吹风EH-NE52</td>
                    </tr>
                    <tr>
                        <td>2000-2999元</td>
                        <td>松下剃须刀ES-SL33(颜色随机发送)</td>
                    </tr>
                    <tr>
                        <td>3000-4999元</td>
                        <td>松下冲牙器EW-DJ40</td>
                    </tr>
                    <tr>
                        <td>5000元及以上</td>
                        <td>松下电吹风EH-NA61</td>
                    </tr>
                </table>
                <p>所有礼品颜色随机发送</p>

                <h5>备注：</h5>
                <p>1.特价商品不参加本次活动。</p>
                <p>2.本活动不与其它活动重复享受。</p>

                <h5>奖品配送方式：</h5>
                <p>根据用户参与该活动时留存一致的姓名，电话号码，地址发送礼品。配送礼品的快递公司由松下指定。</p>

                <h5>奖品配送时间：</h45>
                    <p>顾客上传信息经过工作人员审核通过后的15个工作日内发出。</p>

                    <h4>活动须知：</h4>
                    <ol style="padding-left: 1rem; font-size: 12px;">
                        <li>凡参与本活动，均视为已阅读并同意本活动细则。</li>
                        <li>所有奖品金额均符合『中华人民共和国反不正当竞争法』中相关规定。</li>
                        <li>参与活动者在领取、使用礼品过程中发生任何之伤害与损失，该等伤害非因主办方过失导致，主办方不承担任何责任。</li>
                        <li>若发现有用户利用不正当手段参与活动，活动主办方有权在事先通知的前提下，取消其活动资格。</li>
                        <li>活动主办方不为个人之网络问题而导致参与活动者之权益损失承担任何责任。</li>
                        <li>参与活动者提供收件地址信息有误、联系方式有误、提供虚假凭证、逾期兑奖等情形，皆视为参与者放弃领奖资格与由此引申权利。</li>
                        <li>本活动网站仅为用户提供网络互动式平台体验服务，用户不得利用本网站发布侮辱与攻击性言语、不得侵犯他人隐私、不得发布任何违法内容，任何由用户发布、参与互动内容、及传播结果而来的法律责任，由用户自行承担。</li>
                        <li>本次活动的最终解释权归松下电器（中国）有限公司上海分公司所有。如对活动有任何疑问，请联系松下电器生活沙龙官方微信。</li>
                    </ol>
                    <p></p>
            </div>
        </div>
    </div>

    <script src="../../../../assets/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8" async defer></script>
    <script src="../../../../assets/js/social_share.v2.js" type="text/javascript" charset="utf-8"></script>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="../../../../assets/js/sm-city-picker.v2.js" charset="utf-8"></script>

    <script>
        // 当发票点击上传后，修改上传区域的文案
        document.getElementById('invoice_bytes').onchange = function() {
            console.log('Selected file: ' + this.value);

            var fakeName = this.value;
            var index = fakeName.lastIndexOf("\\");
            var fileName = fakeName.substring(index + 1);

            var node = $(".file_upload_cover");
            // node.attr("placeholder", fileName);
            node.val(fileName);
        };

        document.getElementById('mobile_number').addEventListener('input', function(e) {
            var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,4})(\d{0,4})/);
            e.target.value = !x[2] ? x[1] : '' + x[1] + '-' + x[2] + (x[3] ? '-' + x[3] : '');
        });

        $("#product_category").picker({
            toolbarTemplate: '<header class="bar bar-nav">\
            <button class="button button-link pull-right close-picker">确定</button>\
            <h1 class="title">产品类型</h1>\
            </header>',
            // cssClass: '_PICKER_HEIGHT_',
            cols: [{
                textAlign: 'center',
                values: [
                    '个人电器',
                    '净水器',
                    '微波炉',
                    '电饭煲',
                    '电压力锅',
                    '电热水瓶',
                    '电熨斗',
                    '美容电器',
                    '调理家电',
                    'ODM电风扇',
                    '创风机',
                    '吸尘器',
                    '加湿器',
                    '空气净化器',
                    '被褥干燥机'
                ]
            }]
        });

        // $("#product_model").addEventListener('input', (e) => {
        //     e.target.value = e.target.value.toUpperCase();
        // });

        // 定制日历的时间范围：TODO:replacement
        $("#purchasing_date").calendar({
            minDate: ['2017-04-21'],
            maxDate: ['2017-05-01']
        });

        $.init();


        // 定制省市区选择器的样式
        $("#address_major_part").cityPicker({
            toolbarTemplate: '<header class="bar bar-nav">\
							    <button class="button button-link pull-right close-picker">确定</button>\
							    <h1 class="title">请选择省市区</h1>\
					      </header>'
        });


        // 打开活动规则浮层
        $(document).on('click', '.open-about', function() {
            $.popup('.popup-about');
        });


        // 表单提交的控制逻辑
        $("#cancel-button").click(function() {
            // parent.history.back();

            window.location = "/pana-campaigns/pages/portal.html";
            return false;
        });


        $("#submit-button").click(function() {
            // 1、校验表单的各个输入框
            var is_complete = true;
            $("input.required").each(function(index, element) {

                if (element.value.length == 0) {
                    $.alert(element.placeholder);
                    is_complete = false;
                    return false;
                }
            });

            if (!is_complete) {
                return false;
            }

            if (!$("input[type=checkbox]").is(':checked')) {
                $.alert('请勾选已阅读条款及细则');
                return;
            }

            // modified at 2016.12.05 12:40AM
            // 增加核实对话框
            // 核实内容：姓名、电话号码、购买日期、产品型号、发票金额、发票号码、收货地址

            $.modal({
                title: '请核实您的信息',
                text: '<div class="content-confirm">' +
                    '<div style="clear:both;"><span class="_LEFT_">  姓名:</span><span class="_RIGHT_">' + $("#customer_name").val() + '</span></div>' +
                    '<div style="clear:both;"><span class="_LEFT_">手机号码:</span><span class="_RIGHT_">' + $("#mobile_number").val() + '</span></div>' +
                    '<div style="clear:both;"><span class="_LEFT_">购买日期:</span><span class="_RIGHT_">' + $("#purchasing_date").val() + '</span></div>' +
                    '<div style="clear:both;"><span class="_LEFT_">产品型号:</span><span class="_RIGHT_">' + $("#product_model").val() + '</span></div>' +
                    '<div style="clear:both;"><span class="_LEFT_">发票金额:</span><span class="_RIGHT_">' + $("#invoice_price").val() + '</span></div>' +
                    '<div style="clear:both;"><span class="_LEFT_">发票号码:</span><span class="_RIGHT_">' + $("#invoice_number").val() + '</span></div>' +
                    '<div style="clear:both;"><span class="_LEFT_">收件地址:</span><span class="_RIGHT_">' + $("#address_major_part").val() + '</span></div>' +
                    '<div style="clear:both;"><span class="_LEFT_">详细地址:</span><span class="_RIGHT_">' + $("#address_minor_part").val() + '</span></div>' +
                    '<div style="clear:both;"></div>' +
                    '</div>',
                buttons: [{
                    text: '返回确认',
                    onClick: function() {
                        console.log("返回确认");
                    }
                }, {
                    text: '确认提交',
                    onClick: function() {
                        // 3、提交表单到后端
                        var formData = new FormData();
                        $("input[type=text],[type=tel],[type=number]").each(function(index, element) {
                            console.log(element.id + "\t" + element.value);
                            formData.append(element.id, element.value);
                        });

                        formData.append("invoice_bytes", $("#invoice_bytes")[0].files[0]);

                        $.ajax({
                            url: '/pana-BE-RESTful/upload/2017mayday',
                            timeout: 300000,
                            type: 'POST',
                            data: formData,
                            contentType: false,
                            processData: false,
                            beforeSend: function() {
                                $.showPreloader("提交中……");
                            },
                            success: function(data) {
                                $.hidePreloader();
                                console.log(data);

                                if (data == "DUPLICATE_MP_NUMBER") {
                                    $.alert('该手机号已参加活动');
                                    return false;
                                }

                                $.alert('提交已成功！', function() {
                                    window.location = "/pana-campaigns/pages/portal.html";
                                });
                            },
                            error: function(xhr, textStatus, errorThrown) {
                                $.hidePreloader();
                                $.alert("系统繁忙，请稍后提交");
                            },
                            complete: function() {

                            }
                        });
                    }
                }]
            })
        });


        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/pana-BE-RESTful/wx/init',
            timeout: 300000,
            data: {
                'currentUrl': location.href.split('#')[0]
            },
            success: function(data) {
                window.myShareData = data.result;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: myShareData.appid, // 必填，公众号的唯一标识
                    timestamp: myShareData.timestamp, // 必填，生成签名的时间戳
                    nonceStr: myShareData.noncestr, // 必填，生成签名的随机串
                    signature: myShareData.signature, // 必填，签名，见附录1
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });

                wx.ready(function() {
                    wx.onMenuShareTimeline({
                        title: titleText, // 分享标题
                        link: shareUrl,
                        imgUrl: imageUrl, // 分享图标
                        success: function() {},
                        cancel: function() {}
                    });

                    wx.onMenuShareAppMessage({
                        title: titleText, // 分享标题
                        desc: descriptionText, // 分享描述
                        link: shareUrl,
                        imgUrl: imageUrl, // 分享图标
                        success: function() {},
                        cancel: function() {}
                    });
                });

                wx.error(function(res) {
                    console.log(res);
                });
            }
        });
    </script>

</body>

</html>